<template>
    <div class="temp">
        <!--列表分类-->
        <div class="cate">
            <ul v-bind='{style:"width:"+ulWidth+"px"}'>
                <li @click="getImgs(0)">全部</li>
                <li v-for="item in cates" @click="getImgs(item.id)">{{item.title}}</li>
            </ul>
        </div>
        <!--图片列表-->
        <div class="imgList">
            <ul>
                <li v-for="item in list">
                    <router-link v-bind='{to:"/photos/photoinfo/" + item.id}'>
                        <img v-lazy="item.img_url">
                        <div class="imgDesc">
                            <h3 v-text="item.title"></h3>
                            <p v-text="item.zhaiyao"></p>
                        </div>
                    </router-link>
                </li>

            </ul>
        </div>
    </div>
</template>

<script>
    import common from "../../kits/common"
    import {Toast} from 'mint-ui';
    export default {
        data(){
            return {
                cates: [],
                ulWidth: 320,
                list: []
            }
        },
        created() {
            this.getCates();
            this.getImgs(0);
        },
        methods: {
            getCates() {
                const url = common.apidomain + "/api/getimgcategory";
                this.$http.get(url).then((response) => {
                    let body = response.body;
                    if (body.status != 0) {
                        Toast(body.message);
                        return;
                    }
                    this.cates = body.message;
                    this.ulWidth = (body.message.length + 1) * 66;
                })
            },
            getImgs(cateid) {
                let id = cateid || 0;
                const url = common.apidomain + "/api/getimages/" + id;
                this.$http.get(url).then((response) => {
                    let body = response.body;
                    if (body.status != 0) {
                        Toast(body.message);
                        return;
                    }
                    this.list = body.message;
                })
            }
        }
    }
</script>

<style scoped>
    .cate {
        max-width: 320px;
        overflow-x: auto;
    }

    .cate ul {
        padding-left: 10px;
        margin: 0px;
    }

    .cate li {
        list-style: none;
        display: inline-block;
        font-size: 14px;
        color: #26d0ff;
        padding: 5px;
        cursor: pointer;
    }

    .imgList ul {
        padding-left: 10px;
        margin: 0px;
    }

    .imgList li {
        list-style: none;
        position: relative;
        background-color: rgba(0, 0, 0, .5);
    }

    .imgList li img {
        width: 100%;
        height: 300px;
    }

    .imgDesc {
        width: 100%;
        background-color: rgba(0, 0, 0, .2);
        position: absolute;
        bottom: 3px;
        left: 0px;
    }

    .imgDesc h3 {
        width: 100%;
        font-size: 18px;
        line-height: 1.5em;
        color: #ffffff;
    }

    .imgDesc p {
        width: 100%;
        font-size: 16px;
        color: #ffffff;
        line-height: 1.2em;
    }

    image[lazy=loading] {
        width: 40px;
        height: 300px;
        margin: auto;
    }

</style>